<template>
	<view>
		<Search @handleSearch="toSearch"/>
		<!-- 轮播图 -->
		<swiper indicator-dots
		  autoplay
		  circular
		  indicator-active-color="#eb4450"
		  class="swiper">
		  <block v-for="item of banners" :key="item.goods_id">
		    <swiper-item>
		      <image :src="item.image_src" mode="aspectFill"></image>
		    </swiper-item>
		  </block>
		</swiper>
		
		<!-- 中间菜单 -->
		<view class="menus">
		  <block v-for="(item, index) of menus" :key="index">
		    <image :src="item.image_src"></image>
		  </block>
		</view>
		
		<!-- 楼层 -->
		<view class="floor" v-for="(item, index) of products" :key="index">
		  <view class="floor-title">
		    <image mode="aspectFill" :src="item.floor_title.image_src"></image>
		  </view>
		
		  <view class="floor-body">
		    <!-- 楼层的左边大图 -->
		    <view class="floor-body-left">
		      <image :src="item.product_list[0].image_src"></image>
		    </view>
		
		     <!-- 楼层的右边的四个小图 -->
		    <view class="floor-body-right">
		      <view class="body-right-item" v-for="(goods,goodsIndex) of item.product_list"
		      :key="goodsIndex">
		        <image v-if="goodsIndex > 0" :src="goods.image_src" mode="aspectFill"></image>
		      </view>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	import Search from '../../components/search.vue'
	export default {
		components: {
			Search
		},
		data() {
			return {
				banners: [],
				menus: [],
				products: []
			}
		},
		onLoad() {
			this.getBanners()
			this.getMenus()
			this.getProducts()
		},
		methods: {
			  toSearch(){
				  
			  },
			  getBanners(){
				return new Promise((resolve,reject) => {
				  uni.request({
					url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
					success: (res) => {
						this.banners=res.data.message
					  resolve()
					}
				  })
				})
			  },
			  getMenus(){
				return new Promise((resolve,reject) => {
				  uni.request({
					url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems',
					success: (res) => {
						this.menus=res.data.message
						resolve()
					}
				 })
				})
			  },
			  getProducts(){
				return new Promise((resolve,reject) => {
				  uni.request({
					url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata',
					success: (res) => {
						this.products = res.data.message
					  resolve()
					}
				 })
				})
			  },
			  onPullDownRefresh(){
				  Promise.all([this.getBanners(),this.getMenus(),this.getProducts()])
				  .then(() => {
					uni.stopPullDownRefresh()
				})
			  }
			}
	}
</script>

<style lang="scss">
	.swiper{
	  height: 340rpx;
	  image{
	    width: 750rpx;
	    height: 100%;
	  }
	}
	.menus{
	  display: flex;
	  justify-content: space-around;
	  margin-top: 20rpx;
	}
	.menus image{
	  width: 128rpx;
	  height: 140rpx;
	}
	.floor-title image{
	  margin: 20rpx 0;
	  width: 750rpx;
	  height: 59rpx;
	  display: block;
	}
	
	.floor-body image{
	  display: block;
	}
	
	.floor-body{
	  display: flex;
	  justify-content: space-between;
	  padding: 0 12rpx;
	}
	
	.floor-body-left image{
	  width: 232rpx;
	  height: 386rpx;
	  margin-right: 19rpx;
	}
	
	.floor-body-right{
	  flex: 1;
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: space-between;
	}
	
	.floor-body-right .body-right-item image{
	  width: 232rpx;
	  height: 188rpx;
	}
</style>
